<template>
    <div class="scan__base-wrapper">
        <h2>自定义线条属性</h2>
        <section class="item">
            <span>线条</span>
            <Switch v-model="isScanLine" @on-change="onChange" />
        </section>
        <section class="item">
            <span>线条样式</span>
            <Switch v-model="isSolidLine" @on-change="onChange2" />
        </section>
        <section class="item">
            <span>模糊</span>
            <Switch v-model="isFilter" @on-change="onChange3" />
        </section>
        <section class="item">
            <span>颜色</span>
            <ColorPicker v-model="scanColor" recommend />
        </section>
        <section class="item">
            <span>扫描状态</span>
            <Switch size="large" v-model="isScanStop" @on-change="onChange4">
                <template #open>
                    <span>start</span>
                </template>
                <template #close>
                    <span>stop</span>
                </template>
            </Switch>
        </section>
        <audio
            title="Advertisement"
            ref="audioRef"
            id="audioRef"
            controls
            loop
            autoplay
            :hidden="false"
        >
            <source src="@/assets/radar_scan.mp3" type="audio/mp3" />
        </audio>
        <div
            class="scan__content"
            :style="{ '--blur--': isFilter ? 10 : 0, '--color--': scanColor }"
        >
            <div class="scan-plus">
                <span
                    :class="[
                        'scan',
                        { 'is-scan-line': isScanLine },
                        { 'is-solid': isSolidLine },
                    ]"
                    :style="{
                        animationPlayState: isScanStop ? 'running' : 'paused',
                    }"
                ></span>
            </div>
        </div>
    </div>
</template>

<script setup>
defineOptions({ name: "ScanCustomLine" });
const isScanLine = ref(false);
const isSolidLine = ref(false);
const isFilter = ref(false);
const scanColor = ref("#19be6b");
const isScanStop = ref(true);
const audioRef = ref(null);
const onChange = (evt) => {
    isScanLine.value = evt;
};
const onChange2 = (evt) => {
    isSolidLine.value = evt;
};
const onChange3 = (evt) => {
    isFilter.value = evt;
};
const onChange4 = (evt) => {
    isScanStop.value = evt;
    if (evt && audioRef.value) {
        audioRef.value.play();
    } else {
        if (!audioRef.value.paused) {
            audioRef.value.pause()
        }
    };
};

</script>

<style lang="scss">
.scan__base-wrapper {
    background: #010d19;
    height: 100%;
    color: #fff;
    padding: 10px;
    .item {
        display: inline;
        padding: 0 8px;
    }
    .scan__content {
        display: grid;
        place-items: center;
        margin-top: 20px;
    }
    .scan-plus {
        border-radius: 50%;
        border: 2px solid var(--color--);
        width: 400px;
        height: 400px;
        position: relative;
        overflow: hidden;
    }
    .scan-plus::before {
        position: absolute;
        content: "";
        inset: 56px;
        border-radius: 50%;
        border: 2px dashed var(--color--);
        z-index: 1;
    }
    .scan-plus::after {
        position: absolute;
        content: "";
        inset: 118px;
        border-radius: 50%;
        border: 2px dashed var(--color--);
        z-index: 1;
    }
    .scan {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        background: transparent;
        transform-origin: top left;
        animation: scanAnimate 3s linear infinite;
        animation-play-state: paused;
        &.is-scan-line {
            border-left: 2px dashed var(--color--);
        }
        &.is-solid {
            border-left: 2px solid var(--color--);
        }
    }
    .scan::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 107%;
        height: 100%;
        background: linear-gradient(16deg, var(--color--), transparent);
        filter: blur(calc(1px * var(--blur--)));
    }
    @keyframes scanAnimate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}
</style>
